"use client"

import { useState } from "react"
import BgImgUrl from "./assets/bg.webp"
import { getTranslation } from '../../../locales/translations';
import { getProducts } from "../constants";
import { ChevronRight, ChevronDown } from "lucide-react"

export default function ProductListing({ categories, category, lang }) {
  const [activeCategory, setActiveCategory] = useState(category)
  const [expandedCategory, setExpandedCategory] = useState(category)
  const t = (key) => getTranslation(key, lang);
  const products = getProducts({ t });
  const [hoveredProduct, setHoveredProduct] = useState(products.filter((product) => product.category === activeCategory))

  const handleCategoryClick = (category) => {
    setActiveCategory(category)
    setExpandedCategory(expandedCategory === category ? null : category)
    setHoveredProduct(products.filter((product) => product.category === category))
  }

  const handleProductClick = (productId) => {
    window.open(`/${lang}/product/${productId}/`, "_self")
  }

  const astyle = {
    backgroundImage: `url(${BgImgUrl})`,
  }

  return (
    <div className="">
      <div style={astyle} className="hidden md:block bg-cover bg-no-repeat pb-16 min-h-[18rem]">
        <div className="max-w-5xl mx-auto space-y-2 p-6 pt-10 text-white">
          <p className="text-3xl font-bold">{t("products.cameras")}</p>
          <p>{t("products.camerasDesc")}</p>
        </div>
      </div>
      <div className="w-[90rem]] px-0 md:px-4 py-2 md:py-8 overflow-x-auto">
        <div className="flex w-full md:w-[60rem] space-x-0 md:space-x-6 justify-between mx-auto flex-col md:flex-row">
          {/* 侧边栏导航 - 移动端下拉模式 */}
          <aside className="w-full md:w-auto">
            <nav className="md:space-y-3 md:flex-col hidden md:flex">
              {categories.map((category) => (
                <button
                  key={category.id}
                  onClick={() => handleCategoryClick(category.id)}
                  className={`whitespace-nowrap text-left px-4 py-3 rounded-lg cursor-default transition-all duration-200 ${activeCategory === category.id
                    ? "bg-blue-50 text-blue-600 font-medium shadow-sm"
                    : "text-gray-700 hover:bg-gray-50 hover:text-gray-900"
                    }`}
                >
                  {t(`footer.productLinks.${category.id}`)}
                </button>
              ))}
            </nav>
            {/* 移动端下拉列表 */}
            <div className="md:hidden space-y-2">
              {categories.map((category) => (
                <div key={category.id} className="">
                  <button
                    onClick={() => handleCategoryClick(category.id)}
                    className="w-full flex items-center justify-between px-6 py-4 text-left"
                  >
                    <span className={`${expandedCategory === category.id ? "font-medium" : "text-gray-700"}`}>
                      {t(`footer.productLinks.${category.id}`)}
                    </span>
                    {expandedCategory === category.id ? <ChevronDown className="h4" /> : <ChevronRight className="h4" />}
                  </button>
                  {expandedCategory === category.id && (
                    <div className="grid grid-cols-2 gap-3 px-2 py-4">
                      {products
                        .filter((product) => product.category === category.id)
                        .map((product) => (
                          <div
                            key={product.id}
                            className="bg-white rounded-lg flex flex-col transition-all duration-200 hover:shadow-md"
                            onClick={() => handleProductClick(product.id)}
                          >
                            <div className="flex items-center justify-center">
                              <img
                                src={product.image}
                                alt={product.name}
                                className="w-full object-cover rounded-tl-lg rounded-tr-lg"
                              />
                            </div>
                            <div className="p-3 flex flex-col space-y-1">
                              <p className="!text-sm font-medium text-[#333] line-clamp-2">{product.description}</p>
                              <p className="text-sm text-[#666] mb-1">{product.name}</p>
                            </div>
                          </div>
                        ))}
                    </div>
                  )}
                </div>
              ))}
            </div>
          </aside>

          {/* 产品网格 - 仅在电脑端显示 */}
          <div className="hidden md:grid md:grid-cols-3 gap-4 h-[90%] w-full md:w-[72rem]">
            {hoveredProduct.map((product) => (
              <div
                key={product.id}
                className="border bg-[#f5f5f5] rounded-lg flex flex-col transition-all duration-200 hover:shadow-md"
                onClick={() => handleProductClick(product.id)}
              >
                <div className="bg-white flex items-center justify-center">
                  <img
                    src={product.image}
                    alt={product.name}
                    className="w-full h-full object-cover"
                  />
                </div>
                <div className="p-4 flex flex-col">
                  <h3 className="text-lg font-semibold mb-2 text-gray-900">{product.description}</h3>
                  <p className="text-sm text-gray-600 mb-1">{product.name}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}
